<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>
    <head>
        <title>Mapping ducks</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> //1
        <script type="text/javascript">
            var map;
            var initialLocation = new google.maps.LatLng(52.042500,4.7220571); //2
            function init() {
                var duckOptions = { //3
                    zoom: 15,
                    center: initialLocation,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), duckOptions); //4
                var marker = new google.maps.Marker({ //5
                    position: initialLocation, 
                    map: map
                });
                
                var lat = 52.042500;
                var lng = 4.8920571;
                var newLocation = new google.maps.LatLng(lat, lng);

                map.addOverlay(new google.maps.Marker(newLocation));
                
            }
        </script>
    </head>
    <body  onload="init()"> //6
        <h1>Mapping Ducks</h1>
        <div id="map_canvas" style="width:100%;height:800px"></div> //7
    </body>
</html>